import React, { useRef, useState, useEffect } from 'react'
import { View, Text, StyleSheet, SafeAreaView, Image, Share, Clipboard, TouchableHighlight, TouchableOpacity, Dimensions } from 'react-native'
import { connect } from 'react-redux'
import { pTx } from '../../utils/dimensions';
import { Toast } from '@ant-design/react-native'
import { QRCodeImg } from "qrcode-react-native";
import ShadowCard from "../../utils/shadowCard"
import LinearGradient from 'react-native-linear-gradient';
const ExportPrivateKey = (props) => {
    const copyToClipboard = () => {
        Clipboard.setString(props.route.params.privateKey)
        Toast.info('复制成功')
    }
    return (

        <SafeAreaView>
            <View style={styles.page}>
                <View style={styles.warn}>
                    <Image style={styles.icon} source={require('../../assets/image/icon22.png')}></Image>
                    <Text style={styles.warnText}>私钥未加密，请谨慎导出，做好安全备份！做私钥备份时，请确保周边没有其他人</Text>
                </View>
                <View style={styles.block}>

                    <View style={styles.codeBlock}>
                        <QRCodeImg
                            codeValue={props.route.params.privateKey}
                            size={Number(pTx(180).toFixed(0))}
                            errorCorrectLevel="Q"
                        />
                    </View>
                    <View style={styles.addressBox}>
                        <Text style={styles.styleText}>铭文私钥</Text>
                        <Text style={styles.address}>{props.route.params.privateKey}</Text>
                    </View>
                    <View style={styles.footerButton}>
                        <ShadowCard style={styles.button}>
                            <LinearGradient
                                colors={['rgba(51, 225, 144, 1)', 'rgba(68, 225, 240, 1)']}
                                start={{ x: 0.25, y: 0.25 }}
                                end={{ x: 0.75, y: 0.75 }}
                                style={[styles.linearGradient]}>
                                <TouchableOpacity type="primary" style={[styles.button]} onPress={copyToClipboard}>
                                    <Text style={styles.ButtonText}>复制私钥</Text>

                                </TouchableOpacity>
                            </LinearGradient>
                        </ShadowCard>
                    </View>
                </View>
            </View>

        </SafeAreaView>

    )
}

const mapStateToProps = (state) => (state.wallet)

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(ExportPrivateKey)


const styles = StyleSheet.create({
    page: {
        paddingHorizontal: pTx(30),
    },
    block: {
        marginTop: pTx(15),
        paddingHorizontal: pTx(15),
        borderRadius: pTx(10),
        backgroundColor: "#fff"
    },
    warn: {
        paddingHorizontal: pTx(20),
        marginTop: pTx(20),
        paddingVertical: pTx(12),
        flexDirection: 'row',
        justifyContent: "center",
        alignItems: "center",
        borderRadius: pTx(6),
        backgroundColor: "#fef0e8",
    },
    warnText: {
        fontSize: pTx(11),
        color: "#FB721A",
    },
    icon: {
        marginRight: pTx(8),
        width: pTx(12),
        height: pTx(12),
    },
    codeBlock: {
        paddingVertical: pTx(35),
        flexDirection: 'row',
        justifyContent: "center",
        alignItems: "center",
        borderRadius: pTx(10),
    },
    addressBox: {
        padding: pTx(15),
        marginTop: pTx(12),
        borderRadius: pTx(6),
        backgroundColor: "rgba(247, 247, 247, 1)",
        textAlign: "center"
    },
    styleText: {
        textAlign: "center",
        fontSize: pTx(12),
        color: "rgba(175, 181, 189, 1)"
    },
    address: {
        marginTop: pTx(4),
        textAlign: "center",
        fontSize: pTx(12),
        color: "rgba(10, 12, 20, 1)"
    },

    footerButton: {
        paddingTop: pTx(30),
        paddingBottom: pTx(40),
        alignItems: "center"
    },
    linearGradient: {
        borderRadius: 6
    },
    button: {
        width: pTx(200),
        height: pTx(45),
        flexDirection: 'row',
        justifyContent: "center",
        alignItems: "center",
    },
    ButtonText: {
        color: "rgba(10, 12, 20, 1)",
        fontSize: pTx(16),
        fontWeight: 'bold'
    }
})